<template>
  <div id="websiteSetting" class="container">
    <el-tabs
      class="tab-card tabs-white"
      v-model="activeName"
      type="card"
      @tab-click="handleClick"
    >
      <el-tab-pane :label="$t('栏目静态化')" name="basic">
        <el-form
          ref="basicForm"
          :model="basicForm"
          class="flexForm"
          label-position="top"
        >
          <el-form-item :label="`${$t('选择语言')}:`">
            <el-select
              v-model="lang"
              :placeholder="$t('请选择语言')"
              @change="changLang"
            >
              <el-option
                v-for="item in langList"
                :key="item.id"
                :label="item.lang"
                :value="item.lang"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="`${$t('栏目')}:`">
            <el-select v-model="category_id" :placeholder="$t('请选择栏目')">
              <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="是否更新子栏目:">
            <el-radio-group v-model="has_child">
              <el-radio :label="1">更新子级栏目</el-radio>
              <el-radio :label="2">仅更新所选栏目</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button
              v-loading.fullscreen.lock="loading"
              type="primary"
              @click="save(1)"
            >
              {{ $t('保存') }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane :label="$t('文章静态化')" name="lang">
        <el-form
          ref="basicForm"
          :model="basicForm"
          class="flexForm"
          label-position="top"
        >
          <el-form-item :label="`${$t('选择语言')}:`">
            <el-select
              v-model="lang"
              :placeholder="$t('请选择语言')"
              @change="changLang"
            >
              <el-option
                v-for="item in langList"
                :key="item.id"
                :label="item.lang"
                :value="item.lang"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="`${$t('栏目')}:`">
            <el-select v-model="category_id" :placeholder="$t('请选择栏目')">
              <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button
              v-loading.fullscreen.lock="loading"
              type="primary"
              @click="save(2)"
            >
              {{ $t('保存') }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import websiteApi from '@/api/website'
import moduleApi from '@/api/module'
import websettingApi from '@/api/websetting'
export default {
  components: {},
  data() {
    return {
      loading: false,
      attachmentData: [],
      activeName: 'basic',
      langList: [],
      lang: '',
      categoryList: [],
      category_id: '',
      has_child: 1,
      siteId: '',
      basicForm: {}
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1: {
      handler(val) {
        if (val) {
          this.siteId = val
          this.getLang()
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.siteId = this.$store.getters.siteId
    if (this.siteId) {
      this.getLang()
    }
  },
  methods: {
    // 切换语言
    changLang(val) {
      this.lang = val
      this.getCategoryList()
    },
    // 获取语言
    getLang() {
      websettingApi.langInfo({ site_id: this.siteId }).then(res => {
        this.langList = res.data
        if (res.data.length > 0) {
          this.lang = res.data[0].lang
          this.getCategoryList()
        }
      })
    },
    getCategoryList() {
      moduleApi
        .getModuleCate({ site_id: [this.siteId], lang: this.lang })
        .then(res => {
          if (res.code == 0) {
            this.categoryList = res.data[0].category
            this.categoryList.unshift({
              id: 0,
              title: this.$t('全部')
            })
          }
        })
    },
    // 切换tab
    handleClick(val) {
      this.activeName = val.name
      this.getLang()
    },

    // 保存编辑
    save(type = 1) {
      this.loading = true
      const val = {
        site_id: this.siteId,
        lang: this.lang,
        category_id: this.category_id
      }
      if (type == 1) {
        val.has_child = this.has_child
        websiteApi.createCategory(val).then(res => {
          if (res.code == 0) {
            this.$message.success(res.msg)
          }
          this.loading = false
        })
      } else {
        websiteApi.createContent(val).then(res => {
          if (res.code == 0) {
            this.$message.success(res.msg)
          }
          this.loading = false
        })
      }
    }
  }
}
</script>
